<template>
  <div>
    <br>
    <div>
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" size="small" label-width="107px">
          <el-col :span="9">
            <el-form-item label="收房合同编号">
              <el-input v-model="formData.sfContractNo" placeholder="请输入收房合同编号" clearable
                        :style="{width: '40%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="业主姓名">
              <el-input v-model="formData.ownerName" placeholder="请输入业主姓名" clearable :style="{width: '20%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="小区名称">
              <el-input v-model="formData.premiseName" placeholder="请输入小区名称" clearable :style="{width: '40%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="合同录入日期">
              <el-date-picker v-model="formData.leaseStartTime" value-format="yyyy-MM-dd"
                              :style="{width: '36%'}" placeholder="开始日期" clearable></el-date-picker>-
              <el-date-picker v-model="formData.leaseEndTime" value-format="yyyy-MM-dd"
                              :style="{width: '36%'}" placeholder="结束日期" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="16">_</el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="sfContractNo"
          label="合同编号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="premiseName"
          label="小区">
        </el-table-column>
        <el-table-column
          prop="ownerMobile"
          label="电话">
        </el-table-column>
        <el-table-column
          prop="leaseStartTime"
          label="起租日期">
        </el-table-column>
        <el-table-column
          prop="leaseEndTime"
          label="结束日期">
        </el-table-column>
        <el-table-column
          prop="conInfoTime"
          label="录入日期">
        </el-table-column>
        <el-table-column
          prop="conAudTime"
          label="审核日期">
        </el-table-column>
        <el-table-column
          prop="ownerName"
          label="业主">
        </el-table-column>
        <el-table-column
          prop="sfUserName"
          label="操作人">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="formData.pageNum"
      :limit.sync="formData.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { listShoufang } from "@/api/system/shoufang";

  export default {
    data() {
      return {
        total: 0,
        tableData: [],
        formData: {
          sfContractNo: undefined,
          ownerName: undefined,
          premiseName: undefined,
          leaseStartTime: null,
          leaseEndTime: null,
          pageNum: 1,
          pageSize: 10,
        }
      }
    },
    components: {},
    props: [],
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    created() {
      this.getList();
    },
    methods: {
      /** 查询收房列表 */
      getList() {
        this.loading = true;
        listShoufang(this.addDateRange(this.formData)).then(
          response => {
            console.log(response);
            this.tableData = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.formData.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.formData.sfContractNo = [];
        this.formData.ownerName = [];
        this.formData.premiseName = [];
        this.formData.leaseStartTime = [];
        this.formData.leaseEndTime = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }
</script>

<style scoped>

</style>
